<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>
				<view class="form-box">
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/date.png" />
								<text class="font_3 text_2 ml-9">帮遛师姓名</text>
							</view>
							<view class="flex-row items-center">
							
                <input class="ml-10 font_4" style="text-align: end;" placeholder="请输入" v-model="form.name">
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/location-light.png" />
								<text class="font_3 text_2 ml-9">帮遛师位置</text>
							</view>
							<view class="flex-row items-center" @click="getMapLocation" >
								<!-- <view class="flex-col justify-start items-center shrink-0 text-wrapper_2"><text
										class="font_2">地址簿</text>
								</view> -->
								<text class="ml-10 font_4" >{{form.address?form.address:'点击选择'}}</text>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/time.png" />
								<text class="font_3 text_2 ml-9">空闲时间</text>
							</view>
							<view class="flex-row items-center" @click="showDatePicker_start=true">
                <text class="ml-10 font_4" >{{!form.freeTime?'点击选择':form.freeTime}}</text>
							</view>
						</view>
         
            <u-picker mode="time" v-model="showDatePicker_start" :params="params" :show-time-tag="false" title="选择开始时间" @confirm="confirmDateStart"></u-picker>
            <u-picker mode="time" v-model="showDatePicker_end" :params="params" :show-time-tag="false" title="选择结束时间" @confirm="confirmDateEnd"></u-picker>
					</view>
				</view>
			</view>
			<form-item-title text="帮遛师信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">本人照片</text>
							<u-upload :action="action" :file-list="fileList" height="80" width="120" max-count="1" :header="header" ref="uUpload" ></u-upload>
						</view>
					
            <u-form-item label="性别"
              ><u-input
                :disabled="true"
                input-align="right"
                @click="showSex = true"
                v-model="sexlabel"
                type="select"
            /></u-form-item>
						<u-form-item label="年龄" ><u-input type="number"  v-model="form.age" input-align="right" /></u-form-item>
					
						<u-form-item >
              <u-radio-group v-model="form.fullTimeStatus" class="my-radio">
	<u-radio shape="circle" active-color="#FCD610" :name="1">全职</u-radio>
	<u-radio shape="circle" active-color="#FCD610" :name="0">兼职</u-radio>
</u-radio-group>
            </u-form-item>
					</u-form>
				</view>
			</view>
		
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="备注" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" placeholder="请输入" v-model="form.remark" />
					</u-form-item>
				</view>
			</view>
      <view class="flex-col justify-center items-center">
				<u-checkbox style="margin-bottom: 24rpx;" v-model="checked"
					active-color="#FCD610">我已阅读并同意《隐私协议》和《用户协议》</u-checkbox>
				
			</view>
		
		</view>
    <view class="bottom-box">
			<view class="form-box">
				<view class="flex-row justify-between items-center group_16">
					<view class="flex-col button_3">
						<text class="self-start font_3 text_28">帮遛费用</text>
						<view class="flex-row items-center self-stretch section_11 mt-7">
							<text class="text_31">￥</text>
							<!-- <input class="ml-2 text_30" value="0.00" v-model="form.price" ></input> -->
              <input class="ml-2 text_30" type="digit" :value="form.price" @input="changeInput"></input>
							<text>/小时</text>
						</view>
					</view>
					<view class="flex-col justify-start items-center button_4"><text class="font text_29" @click="add">立即发布</text></view>
				</view>
			</view>
		</view>
    <u-select
      v-model="showSex"
      mode="single-column"
      :list="sexlist"
      @confirm="handlesexconfirm"
    ></u-select>
	</view>
</template>

<script>
import formItemTitle from 'components/index/form-item-title.vue'
import utils from '../../../../utils/util.js'
import url from '../../../../utils/config.js'
import { addSlip } from '@/api/cwbl.js'
export default {
  data() {
    return {
      showSex: false,
      sexlabel: '',
      sexlist: [
        {
          value: '男',
          label: '男',
        },
        {
          value: '女',
          label: '女',
        },
      ],
      radioValue: '全职',
      startTimeStr: '',
      list: [
        '温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。',
      ],
      params: {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: true,
        second: false,
      },

      showDatePicker_start: false,
      showDatePicker_end: false,
      action: url.mobeilURL + '/common/uploadFile', // 图片上传地址
      header: {
        'content-type': 'multipart/form-data',
        Authorization: uni.getStorageSync('cxbtoken'),
      },
      labelStyle: {
        fontWeight: 'bold',
        fontSize: '28rpx',
        whiteSpace: 'nowrap',
      },
      checked: true,
      form: {
        name: '',
        addressId: 0,
        address: '',
        age: null,
        createBy: '',
        createTime: '',
        freeTime: '',
        fullTimeStatus: 0, //是否全职 1是 0不是
        photo: '',
        price: '',
        publisher: '',
        publisherId: '',
        remark: '',
        sex: '',
        status: 0,
        updateBy: '',
        updateTime: '',
        lat: 0,
        lng: 0,
      },
      fileList: [
        // {
        //   url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
        // },
      ],
    }
  },
  methods: {
    handlesexconfirm(val) {
      this.form.sex = val[0].value
      this.sexlabel = val[0].label
    },
    changeInput(e) {
      this.form.price = e.detail.value
    },
    //定位选择详细地址
    getMapLocation() {
      utils.chooseLocationInfo().then((res) => {
        this.form.lat = res.longitude
        this.form.lng = res.latitude
        this.form.address = res.name
      })
    },
    async add() {
      let files = this.$refs.uUpload.lists.filter((val) => {
        return val.progress == 100
      })
      this.form.photo = files.length ? files[0].response.accessPath : ''
      let userInfo = uni.getStorageSync('userinfo')
      this.form.publisherId = userInfo.id
      this.form.publisher = userInfo.nickName
      let res = await addSlip(this.form)
      if (res.code == 200) {
        uni.showToast({
          title: '发布成功',
          icon: 'none',
        })
        uni.navigateBack(-1)
      }
    },
    confirmDateStart(e) {
      let str = `${e.hour}:${e.minute}`
      this.showDatePicker_end = true
      this.showDatePicker_start = false
      console.log(str, '确认')
      this.startTimeStr = str
    },
    confirmDateEnd(e) {
      let str = `${e.hour}:${e.minute}`
      this.form.freeTime = `${this.startTimeStr}-${str}`
    },
    // 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
  },
  components: {
    formItemTitle,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;

  .content-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .notice-box {
      padding: 24rpx;
    }

    .form-box {
      padding: 0 32rpx 32rpx 32rpx;
      margin-bottom: 40rpx;
      .my-radio {
        width: 100%;
        background: red;
        /deep/ .u-radio-group {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }

      .form-item {
        margin-top: 24rpx;

        .ml-9 {
          margin-left: 18rpx;
        }

        .section_2 {
          padding: 26rpx 36rpx 26rpx 44rpx;
          background-color: #ffd6000d;
          border-radius: 16rpx;

          .image_4 {
            width: 24rpx;
            height: 28rpx;
          }

          .font_3 {
            font-size: 28rpx;
            font-family: PingFang SC;
            line-height: 25.76rpx;
            font-weight: 700;
            color: #000000;
          }

          .text_2 {
            line-height: 26.12rpx;
          }

          .text-wrapper_2 {
            padding: 12rpx 0;
            background-color: #fbd610;
            border-radius: 8rpx;
            overflow: hidden;
            width: 100rpx;
            height: 44rpx;

            .font_2 {
              font-size: 20rpx;
              font-family: PingFang SC;
              line-height: 18.4rpx;
              color: #000000;
            }
          }

          .font_4 {
            font-size: 24rpx;
            font-family: PingFang SC;
            line-height: 22.1rpx;
            color: #666666;
          }
        }
      }

      .group_6 {
        padding: 32rpx 0;
        border-bottom: solid 2rpx #f3f3f3;

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.76rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_7 {
          line-height: 26.02rpx;
        }

        .image-wrapper {
          background-color: #ececec;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 100rpx;
          font-size: 30px;
          color: #999999;
        }
      }
    }
  }

  /deep/ .u-add-tips {
    display: none;
  }

  .publish-btn {
    width: 100%;
    padding: 40rpx 0;
    background-color: #fbd610;
    border-radius: 68rpx;
    font-size: 32rpx;
    text-align: center;
    font-weight: 700;
    margin-bottom: 24rpx;
  }
}
.bottom-box {
  padding: 16rpx 0;
  background: #ffffff;
  box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 24rpx 24rpx 0rpx 0rpx;

  .mt-7 {
    margin-top: 14rpx;
  }

  .group_16 {
    padding-left: 36rpx;
    padding-right: 28rpx;

    .button_3 {
      width: max-content;

      .font_3 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.4rpx;
        font-weight: 700;
        color: #666666;
      }

      .text_28 {
        color: #000000;
      }

      .section_11 {
        padding: 6rpx 20rpx;
        background-color: #f6f6f6;
        border-radius: 60rpx;

        .text_31 {
          color: #000000;
          font-size: 24rpx;
          line-height: 17.72rpx;
        }

        .text_30 {
          color: #ff7676;
          font-size: 40rpx;
          line-height: 28.48rpx;
          width: 180rpx;
        }
      }
    }

    .button_4 {
      padding: 28rpx 0;
      background-color: #fbd610;
      border-radius: 68rpx;
      width: 318rpx;
      height: 84rpx;

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        line-height: 30.02rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_29 {
        line-height: 29.88rpx;
      }
    }
  }
}
</style>